<template>
    <div class="login-container">
        <!-- 粒子背景 -->
        <div class="particles-container">
            <Renderer ref="renderer" antialias resize="window">
                <Camera :position="{ z: 10 }" />
                <Scene background="#f0f2f5">
                    <!-- 企业风格粒子 -->
                    <Points
                        :position="{ z: -5 }"
                        :rotation="{ x: 0, y: 0, z: 0 }"
                        :count="500"
                    >
                        <BoxGeometry :width="20" :height="20" :depth="20" />
                        <PointsMaterial :size="0.05" :color="0x2c5282" />
                    </Points>
                    
                    <!-- 连接线效果 -->
                    <Group ref="lines">
                        <Line
                            v-for="i in 50"
                            :key="i"
                            :points="generateLinePoints()"
                            :color="0x4299e1"
                            :lineWidth="1"
                        />
                    </Group>
                </Scene>
            </Renderer>
        </div>
        
        <!-- 登录区域 -->
        <div class="login-box">
            <!-- 左侧品牌区 -->
            <div class="brand-section">
                <div class="logo">
                    <!-- <img src="/logo.png" alt="Logo" onerror="this.src='https://via.placeholder.com/80x80?text=LOGO'" /> -->
                </div>
                <h2>企业门户网站管理系统</h2>
                <p>高效 · 安全 · 专业</p>
            </div>
            
            <!-- 右侧登录表单 -->
            <div class="form-section">
                <h3>系统登录</h3>
                 <el-form ref="loginFormRef" :model="loginForm" status-icon :rules="loginRules" label-width="0"
                    class="loginform">
                    <el-form-item prop="username">
                        <el-input 
                            v-model="loginForm.username" 
                            placeholder="请输入用户名" 
                            prefix-icon="el-icon-user"
                        />
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input 
                            v-model="loginForm.password" 
                            type="password" 
                            placeholder="请输入密码"
                            prefix-icon="el-icon-lock" 
                            show-password
                        />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm()" class="login-button">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        
        <!-- 页脚 -->
        <div class="footer">
            <p>© {{ new Date().getFullYear() }} 企业门户网站管理系统 - (赵一雪)版权所有</p>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import { useRouter } from 'vue-router';
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { useStore } from 'vuex';

// 导入 TroisJS 组件
import {
    Renderer,
    Camera,
    Scene,
    Points,
    Group,
    Line,
    BoxGeometry,
    PointsMaterial
} from 'troisjs'

const store = useStore()
const renderer = ref(null)
const lines = ref(null)

// 生成连接线的点
const generateLinePoints = () => {
    const points = []
    const startX = Math.random() * 20 - 10
    const startY = Math.random() * 20 - 10
    const startZ = Math.random() * 20 - 10
    
    points.push({ x: startX, y: startY, z: startZ })
    
    // 添加2-3个点形成连接线
    const segments = Math.floor(Math.random() * 2) + 2
    for (let i = 0; i < segments; i++) {
        points.push({
            x: startX + Math.random() * 4 - 2,
            y: startY + Math.random() * 4 - 2,
            z: startZ + Math.random() * 4 - 2
        })
    }
    
    return points
}

const loginForm = reactive({
    username: "",
    password: ""
})
const loginFormRef = ref()
const loginRules = reactive({
    username: [
        {
            required: true, message: "请输入用户名", trigger: "blur"
        }
    ],
    password: [
        {
            required: true, message: "请输入密码", trigger: "blur"
        }
    ],
})

const router = useRouter()

// 提交表单函数
const submitForm = () => {
    loginFormRef.value.validate((valid)=>{
        if(valid){
            axios.post("/adminapi/user/login",loginForm)
                .then(res=>{
                    if(res.data.ActionType==="OK"){
                        // 存储用户信息到Vuex
                        store.commit("changeUserInfo",res.data.data)
                        // 重置路由获取状态
                        store.commit("changeGetterRouter",false)
                        // 登录成功后跳转到首页
                        router.push("/index")
                    }else{
                        ElMessage.error('用户名和密码不匹配')
                    }
                })
                .catch(err => {
                    console.error(err)
                    ElMessage.error(`登录失败: ${err.response?.data?.message || '服务器错误'}`)
                })
        }
    })
}

// 动画效果
onMounted(() => {
    if (renderer.value) {
        const scene = renderer.value.scene
        
        if (scene) {
            // 粒子动画
            const points = scene.children.find(child => child.type === 'Points')
            if (points) {
                const animate = () => {
                    points.rotation.y += 0.0005
                    points.rotation.x += 0.0002
                    requestAnimationFrame(animate)
                }
                animate()
            }
            
            // 线条动画
            if (lines.value && lines.value.mesh) {
                const linesGroup = lines.value.mesh
                const animateLines = () => {
                    linesGroup.rotation.y += 0.0003
                    requestAnimationFrame(animateLines)
                }
                animateLines()
            }
            
            // 鼠标交互
            const handleMouseMove = (event) => {
                const x = (event.clientX / window.innerWidth) * 2 - 1
                const y = -(event.clientY / window.innerHeight) * 2 + 1
                
                if (points) {
                    points.rotation.x = y * 0.05
                    points.rotation.z = x * 0.05
                }
                
                if (lines.value && lines.value.mesh) {
                    lines.value.mesh.rotation.x = y * 0.02
                    lines.value.mesh.rotation.z = x * 0.02
                }
            }
            
            window.addEventListener('mousemove', handleMouseMove)
        }
    }
})
</script>

<style lang="scss" scoped>
.login-container {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #f0f2f5;
    position: relative;
    overflow: hidden;
}

.particles-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 0;
}

.login-box {
    display: flex;
    width: 900px;
    height: 500px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    z-index: 1;
    overflow: hidden;
}

.brand-section {
    flex: 1;
    background: linear-gradient(135deg, #2c5282, #4299e1);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px;
    
    .logo {
        width: 80px;
        height: 80px;
        margin-bottom: 20px;
        
        img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    }
    
    h2 {
        font-size: 24px;
        margin-bottom: 20px;
        font-weight: 500;
    }
    
    p {
        font-size: 16px;
        opacity: 0.8;
    }
}

.form-section {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    h3 {
        font-size: 24px;
        color: #333;
        margin-bottom: 30px;
        text-align: center;
    }
    
    .loginform {
        width: 100%;
    }
    
    .login-button {
        width: 100%;
        height: 40px;
        font-size: 16px;
        background: #2c5282;
        border: none;
        
        &:hover {
            background: #4299e1;
        }
    }
}

.footer {
    position: absolute;
    bottom: 20px;
    color: #666;
    font-size: 14px;
    z-index: 1;
}

:deep(.el-input__inner) {
    height: 40px;
    border-radius: 4px;
}

:deep(.el-form-item) {
    margin-bottom: 25px;
}
</style>